<template>
  <div class="big-screen-preview">
    <div class="screen-container">
      <div 
        v-for="(component, index) in config" 
        :key="component.id"
        class="preview-component"
        :style="{
          width: component.config.width,
          height: component.config.height,
          left: component.config.left,
          top: component.config.top,
          position: 'absolute'
        }"
      >
        <!-- 文本组件 -->
        <div 
          v-if="component.type === 'text'" 
          class="text-component"
          :style="{
            fontSize: component.config.fontSize,
            color: component.config.color
          }"
        >
          {{ component.config.text }}
        </div>
        
        <!-- 图片组件 -->
        <img 
          v-else-if="component.type === 'image'" 
          :src="component.config.src" 
          :alt="component.config.alt"
          class="image-component"
        >
        
        <!-- 边框组件 -->
        <div 
          v-else-if="component.type === 'border'" 
          class="border-component"
          :style="{
            border: `${component.config.borderWidth} solid ${component.config.borderColor}`
          }"
        >
        </div>
        
        <!-- 图表组件 -->
        <div 
          v-else-if="component.type.startsWith('chart-') || component.type.startsWith('map-')"
          :id="`chart-${component.id}`" 
          class="chart-component"
        >
        </div>
        
        <!-- 默认占位符 -->
        <div v-else class="component-placeholder">
          <p>{{ component.type }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

const props = defineProps({
  config: {
    type: Array,
    required: true
  }
})

// 图表实例映射
const chartInstances = new Map()

// 在组件挂载后初始化图表
onMounted(() => {
  initCharts()
})

// 在组件更新后重新渲染图表
onUpdated(() => {
  renderCharts()
})

// 在组件卸载前销毁图表
onUnmounted(() => {
  destroyCharts()
})

// 监听配置变化
watch(() => props.config, () => {
  renderCharts()
}, { deep: true })

// 初始化图表
const initCharts = () => {
  props.config.forEach(component => {
    if (component.type.startsWith('chart-') || component.type.startsWith('map-')) {
      const chartDom = document.getElementById(`chart-${component.id}`)
      if (chartDom) {
        // 如果已经有实例，先销毁
        if (chartInstances.has(component.id)) {
          chartInstances.get(component.id).dispose()
        }
        
        const chartInstance = echarts.init(chartDom)
        chartInstances.set(component.id, chartInstance)
      }
    }
  })
  renderCharts()
}

// 渲染图表
const renderCharts = () => {
  props.config.forEach(component => {
    if (component.type.startsWith('chart-') || component.type.startsWith('map-')) {
      const chartInstance = chartInstances.get(component.id)
      if (chartInstance && component.config.option) {
        let option
        try {
          // 如果option是字符串，则尝试解析为JSON
          if (typeof component.config.option === 'string') {
            option = JSON.parse(component.config.option)
          } else {
            option = component.config.option
          }
          chartInstance.setOption(option, true)
        } catch (e) {
          console.error('图表配置解析错误:', e)
        }
      }
    }
  })
}

// 销毁图表
const destroyCharts = () => {
  chartInstances.forEach(chart => {
    chart.dispose()
  })
  chartInstances.clear()
}
</script>

<style scoped>
.big-screen-preview {
  width: 100%;
  height: 100%;
}

.screen-container {
  position: relative;
  width: 100%;
  height: 700px;
  background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
  border-radius: 8px;
  overflow: hidden;
}

.preview-component {
  box-sizing: border-box;
}

.text-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  padding: 10px;
}

.image-component {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.border-component {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.chart-component {
  width: 100%;
  height: 100%;
}

.component-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(64, 158, 255, 0.1);
  border: 1px dashed #409eff;
  color: white;
}
</style>